<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <style>
      #preview {
        margin-top: 2rem;
      }
      .performanceStatistics {
        margin-top: 2rem;
        margin-bottom: 3rem;
        border-collapse: collapse;
      }
      .performanceStatistics tr,td {
        border-bottom: 1px solid rgb(165, 165, 165);
        border-top: 1px solid rgb(165, 165, 165);
        padding: .5rem;
      }
      .d-block {
        display: block;
      }
      .border {
        border: 1px solid grey;
        border-radius: 1rem;
        padding: 0.5rem;
        margin-bottom: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>Hello from OBS Studio Node!</h1>

    <div class="d-block border">
      <b>Recording:</b><br>
      <button id="rec-button" onclick="switchRecording()">
        ⏳ Initializing, please wait...
      </button>
      
      <span id="rec-timer">0:00:00.0</span>
      
      <button title="Open folder with videos" onclick="openFolder()">📂</button>
    </div>
    <div class="d-block border">
      <b>Virtual Camera:</b><br>
      <button id="install-virtual-cam-plugin-button" onclick="installVirtualCamPlugin()">Install Plugin</button>
      <button id="uninstall-virtual-cam-plugin-button" onclick="uninstallVirtualCamPlugin()">Uninstall Plugin</button>
      <button id="start-virtual-cam-button" onclick="startVirtualCam()">Start Virtual Camera</button>
      <button id="stop-virtual-cam-button" onclick="stopVirtualCam()">Stop Virtual Camera</button>
      <span id="virtual-cam-plugin-status">...</span>
    </div>

    <div id="preview">
      Initializing...
    </div>

    <table class="performanceStatistics">
      <tr>
        <td>CPU</td>
        <td>
          <meter id="cpuMeter" value="0" min="0" optimum="50" low="65" high="80" max="100"></meter>
          <span id="cpu">Loading...</span>
        </td>
      </tr>
      <tr>
        <td>Dropped frames</td>
        <td id="numberDroppedFrames">Loading...</td>
      </tr>
      <tr>
        <td>Dropped frames</td>
        <td id="percentageDroppedFrames">Loading...</td>
      </tr>
      <tr>
        <td>Bandwidth</td>
        <td id="bandwidth">Loading...</td>
      </tr>
      <tr>
        <td>Framerate</td>
        <td id="frameRate">Loading...</td>
      </tr>
    </table>

    <pre>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    </pre>

    <script src="./renderer.js"></script>
  </body>
</html>
